<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg width="800" height="600">
    <g>
      <defs>
        <g id="axis" name="axis" stroke="black">
          <defs>
            <marker id="markerArrow" viewBox="0 0 10 10" markerUnits="strokeWidth" markerWidth="10" markerHeight="10"
              refX="1" refY="5" orient="auto">
              <path d="M0 0 L10 5 L0 10 z" id="path" fill="#f00" stroke="none"></path>
            </marker>
          </defs>
          <line x1="30" y1="300" x2="770" y2="300" stroke="black" marker-end="url(#markerArrow)"></line>
          <line x1="400" y1="570" x2="400" y2="30" stroke="black" marker-end="url(#markerArrow)"></line>
          <path
            d="M350 300 L350 305 M450 300 L450 305 M300 300 L300 305 M500 300 L500 305 M250 300 L250 305 M550 300 L550 305 M200 300 L200 305 M600 300 L600 305 M150 300 L150 305 M650 300 L650 305 M100 300 L100 305 M700 300 L700 305 M50 300 L50 305 M750 300 L750 305 M400 250 L395 250 M400 350 L395 350 M400 200 L395 200 M400 400 L395 400 M400 150 L395 150 M400 450 L395 450 M400 100 L395 100 M400 500 L395 500 M400 50 L395 50 M400 550 L395 550"
            id="path"></path>
          <g font-size="12" text-anchor="middle"><text x="385" y="320">0</text><text x="350" y="320">-1</text><text
              x="450" y="320">1</text><text x="300" y="320">-2</text><text x="500" y="320">2</text><text x="250"
              y="320">-3</text><text x="550" y="320">3</text><text x="200" y="320">-4</text><text x="600"
              y="320">4</text><text x="150" y="320">-5</text><text x="650" y="320">5</text><text x="100"
              y="320">-6</text><text x="700" y="320">6</text><text x="50" y="320">-7</text><text x="750"
              y="320">7</text><text x="385" y="250">-1</text><text x="385" y="350">1</text><text x="385"
              y="200">-2</text><text x="385" y="400">2</text><text x="385" y="150">-3</text><text x="385"
              y="450">3</text><text x="385" y="100">-4</text><text x="385" y="500">4</text><text x="385"
              y="50">-5</text><text x="385" y="550">5</text></g>
        </g>
      </defs>
      <use x="0" y="0" xlink:href="#axis"></use>
    </g>
  </svg>
  <svg width="800" height="600">
    <use x="0" y="0" xlink:href="#axis"></use>
  </svg>
</body>
</html>